<template>
  <div>
    <carousel></carousel>
    <div class="tags">
      <p>标签 :</p>
      <p>
        <el-button
          @click="changeTagAction(1)"
          :type="tagAction == 1 ? 'primary' : 'info'"
          :plain="tagAction == 1 ? false : true"
          size="small"
          >全部</el-button
        >
      </p>
      <p>
        <el-button
          @click="changeTagAction(2)"
          :type="tagAction == 2 ? 'primary' : 'info'"
          :plain="tagAction == 2 ? false : true"
          size="small"
          >任务</el-button
        >
      </p>
      <p>
        <el-button
          @click="changeTagAction(3)"
          :type="tagAction == 3 ? 'primary' : 'info'"
          :plain="tagAction == 3 ? false : true"
          size="small"
          >大赛</el-button
        >
      </p>
    </div>
    <div style="padding:0 5%">
      <Waterfall ref="waterfall" :list="list" :gutter="30" :width="290">
      <template #item="{ item, url, index }">
        <div class="card" @click="competitionDetailsPage">
          <LazyImg :url="url"></LazyImg>
          <p class="text">{{ item.title }}</p>
          <div :class="item.tag == '已结束' ? 'grayTriangle' : 'redTriangle'">
            <h2>大 赛</h2>
          </div>
          <div class="whiteTriangle"></div>
          <div class="footer" v-if="item.tag">
            <p v-if="item.tag != '已结束'">
              <!-- <span class="endTitle">{{ item.endTitle }}</span> -->
              <span class="endTime">剩余时间:</span>
              <span>
                <el-countdown
                  format="DD[天]HH小时mm分ss秒"
                  :value-style="{ color: 'red', 'font-weight': 'bold','font-size':'0.0631rem','position':'relative','top':'-0.044rem' }"
                  :value="item.endTime"
                >
                </el-countdown>
              </span>
              <span
                class="tagButton"
                :style="{ backgroundColor: checkTagButtonColor(item.tag) }"
                >{{ item.tag }}</span
              >
            </p>
            <p v-else>
              <span
                class="tagButton"
                :style="{ backgroundColor: checkTagButtonColor(item.tag) }"
                style="top: -0.14rem"
                >{{ item.tag }}</span
              >
            </p>
          </div>
        </div>
      </template>
    </Waterfall>
    </div>
    <!-- <div class="body">
      <div class="list">
        <div class="left">
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg"
              fit="cover"
              style="width: 100%"
            />
            <p>2023年重庆市高校第二届“软件通杯”简历设计技能大赛</p>
          </div>
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
        </div>
        <div class="middle">
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-28/thumb_1698499775360.jpg"
              fit="cover"
              style="width: 100%"
            />
            <p>
              2023年首届唐山师范学院“源素通杯”简历创意设计大赛
            </p>
          </div>
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-28/thumb_1698499775360.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
          <div>
            <el-image
              src="http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-28/thumb_1698499775360.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
        </div>
        <div class="right">
          <div>
            <el-image
              src="	http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-13/thumb_1699855194572.jpg"
              fit="cover"
              style="width: 100%"
            />
            <p>
              河北建筑工程学院2023年第一届“软件通杯”简历设计技能大赛
            </p>
          </div>
          <div>
            <el-image
              src="	http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-13/thumb_1699855194572.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
          <div>
            <el-image
              src="	http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-13/thumb_1699855194572.jpg"
              fit="cover"
              style="width: 100%"
            />
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import carousel from "@/views/components/carousel.vue"
import "vue-waterfall-plugin-next/dist/style.css";
import checkColor from "@/views/data/checkColor";
import { useRouter } from "vue-router";

/**
 * 引入颜色判断
 */
const { checkTagButtonColor } = checkColor();
/**
 * 标签切换
 */
const tagAction = ref(1);
const changeTagAction = (val) => {
  tagAction.value = val;
};
/**
 * 瀑布流图片
 */
const list = reactive([
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg",
    title: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    endTitle: "距离开始",
    endTime: 1708690634265,
    tag: "待开始",
  },
  {
    src: "	http://crowdsourcing.jqweike.com/data/activityImage/small/2023-09-06/thumb_1694003095402.jpg",
    title: "2023年四川省第四届高职高专“软件通杯”简历设计技能大赛",
    endTitle: "报名结束",
    endTime: 1708790634265,
    tag: "报名中",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-24/thumb_1700811803394.jpg",
    title: "2023年淮阴师范学院外国语学院“软件通杯”课件制作大赛",
    endTitle: "作品上传",
    endTime: 1708795634265,
    tag: "待上传",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-28/thumb_1698499775360.jpg",
    title: "2023年首届唐山师范学院“源素通杯”简历创意设计大赛",
    endTitle: "评审结束",
    endTime: 1708787634265,
    tag: "评审中",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-23/thumb_1700715299199.jpg",
    title: "2023年第二届“软件通杯”天津职业大学简历创意设计大赛",
    endTitle: "公示结束",
    endTime: 1708747634265,
    tag: "公示中",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-13/thumb_1699855194572.jpg",
    title: "河北建筑工程学院2023年第一届“软件通杯”简历设计技能大赛",
    // endTitle: "公示结束",
    // endTime: 1708747634265,
    tag: "已结束",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-06/thumb_1699272808958.jpg",
    title: "2023年广东技术师范大学“博学杯”英语配音大赛",
    endTitle: "评审结束",
    endTime: 1708787634265,
    tag: "评审中",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-06/thumb_1699272019634.jpg",
    title: "2023年萍乡学院第一届“未来学堂杯”说课大赛",
    endTitle: "报名结束",
    endTime: 1708790634265,
    tag: "报名中",
  },
  {
    src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg",
    title: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
    endTitle: "公示结束",
    endTime: 1708747634265,
    tag: "公示中",
  },
]);
/**
 * 瀑布流图片重绘
 */
const waterfall = ref(null);
// waterfall.value.renderer()
/**
 * 触底后再获取更多大赛信息接口
 */
const getOrderList = () => {
  let moreList = [
    {
      src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-12/thumb_1697089394997.jpg",
      title: "2023年重庆市高校第二届“软件通杯”简历设计技能大赛",
      endTitle: "距离开始",
      endTime: 1708690634265,
      tag: "待开始",
    },
    {
      src: "	http://crowdsourcing.jqweike.com/data/activityImage/small/2023-09-06/thumb_1694003095402.jpg",
      title: "2023年四川省第四届高职高专“软件通杯”简历设计技能大赛",
      endTitle: "报名结束",
      endTime: 1708790634265,
      tag: "报名中",
    },
    {
      src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-24/thumb_1700811803394.jpg",
      title: "2023年淮阴师范学院外国语学院“软件通杯”课件制作大赛",
      endTitle: "作品上传",
      endTime: 1708795634265,
      tag: "待上传",
    },
    {
      src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-10-28/thumb_1698499775360.jpg",
      title: "2023年首届唐山师范学院“源素通杯”简历创意设计大赛",
      endTitle: "评审结束",
      endTime: 1708787634265,
      tag: "评审中",
    },
    {
      src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-23/thumb_1700715299199.jpg",
      title: "2023年第二届“软件通杯”天津职业大学简历创意设计大赛",
      endTitle: "公示结束",
      endTime: 1708747634265,
      tag: "公示中",
    },
    {
      src: "http://crowdsourcing.jqweike.com/data/activityImage/small/2023-11-13/thumb_1699855194572.jpg",
      title: "河北建筑工程学院2023年第一届“软件通杯”简历设计技能大赛",
      // endTitle: "公示结束",
      // endTime: 1708747634265,
      tag: "已结束",
    },
  ];
  list.push(...moreList);
};
/**
 * 触底刷新
 */
const handleScroll = () => {
  window.addEventListener("scroll", () => {
    let scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    let windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight =
      document.documentElement.scrollHeight || document.body.scrollHeight;
    if (scrollTop + windowHeight == scrollHeight) {
      console.log("到了底部");
      getOrderList();
    }
  });
};
onBeforeUnmount(() => {
  window.removeEventListener("scroll", () => {});
});
/**
 * 初始化加载
 */
const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
onMounted(() => {
  console.log(value1.value);
  handleScroll();
});
/**
 * 跳转到详情页
 */
const router = useRouter()
const competitionDetailsPage = () =>{
  router.push({
    "path":"/competitionDetails"
  })
}
</script>

<style lang="scss" scoped>
.tags {
  margin: 0.1rem 0.1rem;
  padding-left: 7.2%;
  display: flex;
  p {
    margin: 0 0.04rem;
    line-height: 0.13rem;
  }
}
.body {
  padding: 0.01rem;
}
.card {
  position: relative;
  border: 0.01rem solid rgb(187, 187, 187);
  padding: 0.08rem;
  cursor: pointer;
  p {
    display: flex;
    font-size: 0.084rem;
    line-height: 0.16rem;
    font-weight: bold;
    margin-top: 0.06rem;
  }
  .footer {
    position: absolute;
    bottom: 0.46rem;
    width: 90%;
    left: 0rem;
    padding: 0 0.08rem;
    background-color: rgb(255, 255, 255, 0.8);
    p {
      margin: 0;
      padding: 0 0.02rem;
      line-height: 0.1rem;
      .endTitle {
        font-size: 0.0631rem;
        font-weight: bold;
        line-height: 0.2rem;
      }
      .endTime {
        color: red;
        font-size: 0.0631rem;
        margin-left: 0.02rem;
        line-height: 0.2rem;
        margin-right: 0.01rem;
      }
    }
  }
}
::v-deep(.el-statistic) {
  margin-top: 0.076rem;
}
.tagButton {
  // background-color: rgb(128, 171, 5);
  line-height: 0.1062rem;
  height: 0.1rem;
  font-size: 0.0631rem;
  padding: 0.01rem 0.04rem;
  position: absolute;
  right: 0.12rem;
  top: 0.036rem;
  border-radius: 0.01rem;
  color: white;
}
.list {
  > div {
    display: inline-block;
    vertical-align: top;
    > div {
      margin-bottom: 0.2rem;
      p {
        font-size: 0.09rem;
        line-height: 0.16rem;
        font-weight: bold;
        margin-top: 0.2rem;
      }
    }
  }
  .left {
    width: 30%;
    > div {
      width: 90%;
      padding: 5%;
      border: 0.01rem solid rgb(187, 187, 187);
    }
  }
  .middle {
    width: 41%;
    margin: 0 2%;
    > div {
      width: 90%;
      padding: 5%;
      border: 0.01rem solid rgb(187, 187, 187);
    }
  }
  .right {
    width: 25%;
    > div {
      width: 90%;
      padding: 5%;
      border: 0.01rem solid rgb(187, 187, 187);
    }
  }
}
.redTriangle {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    rgb(255, 92, 36) 50%,
    rgb(236, 0, 0) 100%
  );
}
.grayTriangle {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    rgb(187, 187, 187) 50%,
    rgb(187, 187, 187) 100%
  );
}
.whiteTriangle {
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    45deg,
    transparent,
    transparent 50%,
    white 50%,
    white 100%
  );
}
h2 {
  font-size: 0.09rem;
  font-weight: bold;
  text-align: right;
  padding-right: 0.06rem;
  line-height: 0.25rem;
  transform: rotate(45deg);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
</style>
